<template>
	<view class="case-category">
		<view class="case-category-list">
			<view class="case-category-item" v-for="(data,index) in categoryList" :key="index" @click="chose(data.id,index)" 
			:class="[{'active':choseList.indexOf(data.id) != -1}]">
				{{data.name}}
				<image src="https://master.shengejiaju.cn/web/static/icons/icon_chose.png"></image>
			</view>
		</view>
		<view class="case-category-btn" @click="saveCategory">保存</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				choseList: [],
				categoryList: [{
					id: 1,
					name: '北欧'
				},{
					id: 2,
					name: '现代'
				},{
					id: 3,
					name: '简约'
				},{
					id: 4,
					name: '轻奢'
				},{
					id: 5,
					name: '极简'
				},{
					id: 6,
					name: '极简'
				},{
					id: 7,
					name: '极简'
				}]
			}
		},
		methods: {
			chose(id){
				if(this.choseList.indexOf(id)!=-1){
					this.choseList.forEach((item,index) => {
						if(item==id){
							this.choseList.splice(index,1)
						}
					})
				}else{
					this.choseList.push(id)
				}
			},
			saveCategory(){
				uni.showToast({
					icon: 'none',
					title: '添加分类成功',
					duration: 1500
				})
				setTimeout(() => {
					uni.navigateBack()
				},1500)
			}
		}
	}
</script>
<style lang="scss">
	page{
		background-color: #FFF;
		padding: 20rpx;
		box-sizing: border-box;
	}
	@import  '../../static/scss/case-category.scss'
</style>